<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
    width="720px"
    style="overflow: hidden;"
    :bodyStyle="{ maxHeight: '520px', overflow: 'auto' }"
  >
    <a-spin :spinning="spinning">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{ width: '100%' }"
        layout="horizontal"
        v-bind="{
          labelCol: { span: 4 },
          wrapperCol: { span: 20 }
        }"
        :colon="true"
        labelAlign="right"
      >
        <a-row style="height: 100%">
          <a-col :span="24">
            <a-form-model-item label="姓名" prop="nickName" v-bind="{}">
              <a-input
                v-model="formData.nickName"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="!formData.id">
            <a-form-model-item label="登录名" prop="loginName" v-bind="{}">
              <a-input
                v-model="formData.loginName"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号" prop="phoneNumber" v-bind="{}">
              <a-input
                v-model="formData.phoneNumber"
                placeholder=""
                :allowClear="true"
                size="default"
                :disabled="false"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="性别" prop="sex" v-bind="{}">
              <a-radio-group v-model="formData.sex" button-style="outline" size="default" :disabled="false">
                <a-radio v-for="(opt, idx) in sex_options" :key="idx" :value="opt.value">
                  {{ opt.label }}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="状态" prop="state" v-bind="{}">
              <a-radio-group v-model="formData.state" button-style="outline" size="default" :disabled="false">
                <a-radio v-for="(opt, idx) in state_options" :key="idx" :value="opt.value">
                  {{ opt.label }}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="角色" prop="roleIds" v-bind="{}">
              <a-checkbox-group v-model="formData.roleIds">
                <a-checkbox v-for="(opt, idx) in roles_options" :key="idx" :value="opt.id">
                  {{ opt.roleName }}
                </a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { get, add, upd } from '@/api/sys/user.js'
import { getAll } from '@/api/sys/role.js'
export default {
  components: {},
  props: [],
  data () {
    return {
      title: '',
      spinning: false,
      confirmLoading: false,
      visible: false,
      defaultFormData: {
        id: null,
        roleIds: [],
        nickName: '',
        loginName: '',
        phoneNumber: '',
        sex: '1',
        state: '1'
      },
      roles_options: [],
      formData: {},
      rules: {
        nickName: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '姓名最大长度不能大于20',
            trigger: 'blur'
          }
        ],
        loginName: [
          {
            required: true,
            message: '登录名不能为空',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '登录名最大长度不能大于20',
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },
          {
            max: 20,
            message: '手机号最大长度不能大于20',
            trigger: 'blur'
          },
          {
            pattern: '^1[3456789]\\d{9}$',
            message: '请输入正确手机号码',
            trigger: 'blur'
          }
        ],
        sex: [
          {
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }
        ],
        state: [
          {
            required: true,
            message: '状态不能为空',
            trigger: 'change'
          }
        ],
        roleIds: [
          {
            required: true,
            message: '角色不能为空',
            trigger: 'change'
          }
        ]
      },
      sex_options: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ],
      state_options: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '禁用',
          value: '0'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    showModal (id) {
      this.formData = Object.assign({}, this.defaultFormData)
      this.visible = true
      this.roles_options = []
      getAll().then(res => {
        this.roles_options = res.data || []
      })
      if (id) {
        this.spinning = true
        this.title = '编辑'
        get({ id: id }).then(res => {
          this.formData = this.$utils.mergeObjSamePro(this.defaultFormData, res.data)
          this.formData.state += ''
          this.formData.sex += ''
          this.spinning = false
        })
      } else {
        this.title = '添加'
      }
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
        } else {
          if (this.formData.id) {
            upd(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.$emit('search')
                this.hideModal()
              }
            })
          } else {
            add(this.formData).then(res => {
              if (res.code === 1) {
                this.$success({
                    title: '保存成功',
                    content: `新增用户默认密码为：${res.data} 请牢记！`,
                    onOk () {}
                  })
                this.$emit('search', { pageNumber: 1 })
                this.hideModal()
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
